<script setup>
    import {reactive,provide}  from 'vue'
   import Header from './components/header.vue';
   import Footer from './components/footer.vue';


    const propsUser=reactive({
        name:"fanhuiling",
        age:18
    })
    const name="fanhuiling"

    const addAge=()=>{
        propsUser.age++;
        console.log(propsUser.age);
        
    }
    // 子传父
    const emitsGetUser=(data)=>{
        console.log(data);
        
    }
    const emitsAddAge=(age)=>{
        propsUser.age+=age;
        console.log(propsUser.age);
        
    }
    //跨组件传递
    provide("provideUser",propsUser)
    provide("provideMessage",{
        sendMessage(message){
            console.log(message);
            
        }
    })

</script>

<template>
    <h3>App.vue组件---Top</h3>
    <!--父组件通过属性的形式向子组件传递数据 -->
    <Header @getUser="emitsGetUser" @addAge="emitsAddAge">
        <p>这是默认插槽（匿名）插槽显示的内容</p>
    </Header>   
    <!-- 绑定到一起 -->
    <button @click="addAge">App增加1年</button>
    <Footer :="propsUser">
        <template v-slot:footer>
            <p>这是具名插槽显示的内容</p>
        </template>
    </Footer>

</template>

<style scoped>

</style>
